<template>
	<view style="background-color: #f0f0f0;" class="vwh df-yc">
		<!-- 导航栏 -->
		<view class="navbar w100">
			<!--导航栏背景图 -->
			<view :style="{height:customBar+'px'}" class="cu-bg">
				<image style="width: 750rpx;" src="../../../static/imgs/images/jcwdjw.jpg" mode="widthFix"></image>
			</view>
			<cu-custom backColor="#ffffff" :isBack="true" :showBackIcon="true">
				<block slot="backText">
					<text class="nav-title white shopro-selector-rect">集茶碗得金碗</text>
				</block>
			</cu-custom>
		</view>
		<view class="content wh100">
			<scroll-view :refresher-triggered="refreshing" @refresherrefresh="refresherrefresh"
				refresher-background="#622128" :refresher-enabled="true" scroll-y="true">
				<view class="top-img bg-cover">
					<image style="width: 750rpx;position: absolute;top: 0;left: 0;"
						src="../../../static/imgs/images/jcwdjw.jpg" mode="widthFix"></image>
					<view :style="{paddingTop:customBar+'px'}" class="float-box px30 bs wh100 df-xb">
						<view class="left mt30 h100 df-y jc">
							<view style="font-size: 46rpx;" class="title white shsc fb">集茶碗<text style="color: #FFD190;"
									class="ml10">得金碗</text></view>
							<view style="color: #622128;" class="mt30 little fs24 df-c shsc">黄金茶碗免费领</view>
						</view>
						<view @click="jump('pages/user/rules/rules',{type:'rich',richText:bowlList.bowl_rule})"
							class="rule mt30">
							<view class="df-c">
								<text class="fs24 mr10" style="color:#F0F0F0;">规则说明</text>
								<image style="width: 28rpx;" :src="temImgUrl+'/wh.png'" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
				</view>
				<!-- 已获得茶碗 -->
				<view class="wrap bs pl30 wrap-1">
					<view class="title fb fs32 shsc">已获得的茶碗</view>
					<scroll-view scroll-x="true">
						<view class="list df w100">
							<view v-for="(item,index) in bowlList.bowl" class="item mr20 bs pt30 pb10 df-yc"
								:key="index">
								<view class="img">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="num fs26 df-c">
									<text :style="{color:item.textColor}" class="mr10">{{item.name}}</text>
									<view :style="{backgroundColor:item.textColor}" class="white shsc df-c circle">
										{{item.num}}
									</view>
								</view>
								<view @click="fuseBowl(item.can_synthesis.length,item.can_synthesis)"
									:style="{backgroundColor:item.can_synthesis.length==0?'#F1F1F1':'#963541',color:item.can_synthesis.length==0?'#999999':'#FFFFFF'}"
									class="button df-c fs24">升级</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="wrap bs px30 warp-2">
					<view class="title fb fs32 shsc">我的金茶碗</view>
					<view class="list df-xb">
						<view v-if="bowlList.gold.length==0" style="color:#cccccc" class="w100 fs26 df-c">
							<view class="df-c">
								<u-line length="50" color="#cccccc"></u-line>
								<view class="ma10">暂无金茶碗</view>
								<u-line color="#cccccc" length="50"></u-line>
							</view>
						</view>
						<view v-for="(item,index) in bowlList.gold" class="item mb30 df-y ai" :key="index">
							<view class="img">
								<image :src="item.icon" mode="widthFix"></image>
							</view>
							<view class="name df-c fs24">实体黄金茶碗</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<popup @fuseSuccess="fuseSuccess" ref="popup"></popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import popup from '../children/popup.vue'
	export default {
		components: {
			popup
		},
		data() {
			return {
				bowlList: {},
				temImgUrl: this.$IMG_URL_TEMP,
				domain: this.$IMG_URL,
				refreshing: true,
				firstEnter: true
			};
		},
		computed: {
			...mapState({
				customBar: state => state.init.customBar,
			})
		},
		mounted() {
			this.getBowl()
		},
		methods: {
			//获取茶碗
			getBowl() {
				const that = this
				if (!this.firstEnter) {
					if (!this.refreshing) {
						this.refreshing = true;
					}
				}
				this.$api('teaBowl.userBowlMessage').then(res => {
					this.firstEnter = false
					this.bowlList = res.data
					setTimeout(e => {
						that.refreshing = false;
					})
				})
			},
			refresherrefresh() {
				this.getBowl()
			},
			// 路由跳转
			jump(path, params) {
				this.$Router.push({
					path: path,
					query: params
				});
			},
			fuseBowl(length, data) {
				if (length == 0) return
				this.$refs.popup.open(JSON.stringify(data))
			},
			fuseSuccess() {
				this.$refs.popup.close()
				this.getBowl()
			}
		},

	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}

	.navbar {
		width: 100%;
		position: fixed;
		z-index: 9999;
		top: 0;
	}

	.cu-bg {
		width: 750rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
	}

	.content {
		scroll-view {
			height: 100%;
		}

		.top-img {
			position: relative;
			width: 750rpx;
			height: 459rpx;

			.left {
				.little {
					width: 209rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
				}
			}

			.float-box {
				position: absolute;
				z-index: 10;
			}

			.rule {}
		}
	}

	.wrap {
		.title {
			margin: 60rpx 0 30rpx 0;
		}
	}

	.wrap-1 {
		scroll-view {
			width: 100%;
		}

		.list {
			.item {
				width: 190rpx;
				height: 267rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				justify-content: space-around;
				flex-shrink: 0;

				.img {
					width: 91rpx;
					height: 72rpx;
					background-color: #EDE1D9;
				}

				.num {
					.circle {
						min-width: 34rpx;
						height: 34rpx;
						border-radius:34rpx;
						padding: 10rpx;
					}
				}

				.button {
					width: 142rpx;
					height: 47rpx;
					border-radius: 24rpx;
				}
			}
		}
	}

	.warp-2 {
		.list {
			flex-wrap: wrap;

			.item {
				flex-shrink: 0;
				width: 335rpx;
				height: 336rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				justify-content: space-between;
				padding: 80rpx 0 35rpx 0;

				.name {
					width: 199rpx;
					height: 50rpx;
					background: #F3F6F8;
					border-radius: 25rpx;
				}

				.img {
					width: 143rpx;
					height: 112rpx;
					background-color: pink;
				}
			}
		}
	}
</style>
